import React, {useState} from 'react';
import {Button, Form, Input, message} from "antd";
import {NavLink, useNavigate} from "react-router-dom";
import './index.less';
import {register} from "@/services/user/api";

const Register: React.FC = () => {
    const navigate = useNavigate();
    const model = {
        username: '',
        password: '',
        phone: ''
    };
    const [state, setState] = useState<any>({
        model
    });
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    const toRegister = async (values: API.UserRegisterParams) => {
        setState(Object.assign({...state}, {
            model: values,
        }));
        try {
            register(values).then(res => {
                    console.log(res)
                    if (res.status === 200) {
                        message.success('注册成功');
                        navigate('/');
                    }
                }, onRejected => {
                    if (onRejected.status === 404) {
                        message.error("服务不存在")
                    } else {
                        message.error("注册失败, 请联系系统管理员")
                    }
                }
            )
        } catch (error) {
            message.error("注册失败" + error);
        }

    };
    return (
        <div className="container flex-center">
            <div className='row-flex-container'>
                <Form name="register"
                      labelAlign='left'
                      onFinish={toRegister}
                      onFinishFailed={onFinishFailed}
                      layout="horizontal"
                      initialValues={state.model}>
                    <Form.Item label="用户名" name="username"
                               rules={[{required: true, message: '请输入用户名!'}]}>
                        <Input placeholder='请输入用户名'/>
                    </Form.Item>
                    <Form.Item label="手机号" name="phone"
                               rules={[{required: true, message: '请输入手机号!'}]}>
                        <Input placeholder='请输入手机号'/>
                    </Form.Item>
                    <Form.Item label="登录密码" name="password" hasFeedback
                               rules={[{required: true, message: '请输入登录密码!'}]}>
                        <Input.Password placeholder='请输入登录密码'/>
                    </Form.Item>
                    <Form.Item label="登录确认密码" name="repPwd" hasFeedback dependencies={['password']} rules={[
                        {required: true, message: '请输入登录确认密码!'},
                        ({getFieldValue}) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('密码和确认密码不一样!'));
                            },
                        }),
                    ]}>
                        <Input.Password placeholder='请输入登录确认密码'/>
                    </Form.Item>

                    <div className="bottom">
                        <Button type="primary" htmlType="submit">注册</Button>
                        <p>
                            <NavLink to='/login'>已有账号，去登录&gt;&gt;</NavLink>
                        </p>
                    </div>
                </Form>
            </div>
        </div>

    );
};
export default Register;
